import type { tagEmits } from 'element-plus';
<template>
  <div>
    <el-dialog
      v-model="dialogVisible"
      title="工单提交"
      center
      width="1080px"
      @close="closeDialog"
    >
      <div class="chat-content">
        <div class="chat-box">
          <div
            v-for="(item, index) in chatList"
            :key="index"
            class="chat-item"
            :class="item.userType == '00' ? 'left' : 'right'"
          >
            <el-image
              style="width: 50px; height: 50px; border-radius: 4px"
              :src="filterAvatar(item.avatar)"
            />
            <div class="chat-row">
              <div class="chat-msg">
                {{ item.content || "-" }}
              </div>
            </div>
          </div>
        </div>
        <div>
          <el-select
            v-model="message.problemType"
            class="m-2"
            placeholder="请选择问题类型"
          >
            <el-option
              v-for="item in typeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <el-input
          v-model="message.problemDescription"
          :rows="9"
          type="textarea"
          placeholder="请输入问题描述"
        />
        <el-button type="primary" class="send-btn" @click="handleConfirm">
          发送
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch, computed } from "vue";
import { ElMessage } from "element-plus";
import { addOrder } from "@/api/control/order";
import { localCache } from "@/utils/cache";
import defaultImg from "@/assets/img/common/default.png";

const emits = defineEmits(["update:show", "change"]);
const props = defineProps({
  // 是否显示
  show: {
    type: Boolean,
    default: false,
  },
});

const baseURL = import.meta.env.VITE_BASE_URL;
const dialogVisible = computed(() => props.show); // 控制弹窗显示
const message = reactive({
  problemType: "",
  problemDescription: "",
});
const chatList = ref<any>([]); // 聊天列表
const typeList = ref<any>([
  { value: 1, label: "售后问题" },
  { value: 2, label: "产品问题" },
]);

watch(props, (val) => {
  if (val.show) {
    chatList.value = [
      {
        content: "您好,请问您需要提交什么工单？",
        avatar: "/profile/avatar/2023/11/13/blob_20231113165215A001.png",
        userType: "00",
      },
    ];
  }
});

// 关闭弹窗
const closeDialog = () => {
  emits("update:show", false);
  emits("change");
};

// 头像处理
const filterAvatar = computed(() => (val) => {
  if (val.indexOf("http") > -1) {
    return val;
  } else if (val.indexOf("profile") > -1) {
    return baseURL + val;
  } else {
    return defaultImg;
  }
});

// 提交工单
const handleConfirm = () => {
  if (message.problemDescription == "") {
    ElMessage.warning("请输入问题描述");
    return;
  }
  if (message.problemType == "") {
    ElMessage.warning("请选择问题类型");
    return;
  }
  addOrder(message).then((res) => {
    let info = localCache.getCache("myInformationAll");
    console.log(info.user.avatar, "用户头像");

    if (info) {
      chatList.value.push({
        content: message.problemDescription,
        avatar: info.user.avatar || defaultImg,
        userType: "01",
      });
    }
    message.problemType = "";
    message.problemDescription = "";

    setTimeout(() => {
      chatList.value.push({
        content: "好的,你的工单已提交,请前往控制台查看",
        avatar: "/profile/avatar/2023/11/13/blob_20231113165215A001.png",
        userType: "00",
      });
    }, 900);
    setTimeout(() => {
      closeDialog();
    }, 5000);
  });
};
</script>

<style lang="less" scoped>
:deep(.el-textarea__inner) {
  resize: none;
  outline: none;
}
:deep(.el-dialog--center .el-dialog__body) {
  width: 100%;
  .chat-content {
    position: relative;
    .chat-box {
      height: 400px;
      overflow-y: auto;
      padding: 20px;
      border: 1px solid #ebeef5;
      scroll-behavior: smooth;
      .chat-item {
        display: flex;
        margin-bottom: 20px;
        .chat-row {
          max-width: calc(100% - 100px);
          display: flex;
          flex-direction: column;
        }
        .chat-msg {
          background: #f2f6fc;
          padding: 8px 20px;
          line-height: 34px;
          border-radius: 8px;
          position: relative;
          &::after,
          &::before {
            display: none;
            content: "";
            width: 0;
            height: 0;
            border-top: 6px solid transparent;
            border-bottom: 6px solid transparent;
            position: absolute;
            top: 10px;
          }
        }
      }
      .left {
        justify-content: flex-start;
        .chat-row {
          align-items: flex-start;
        }
        .chat-msg {
          margin-left: 10px;
          &::before {
            display: block;
            border-right: 6px solid #f2f6fc;
            left: -6px;
          }
        }
      }
      .right {
        flex-direction: row-reverse;
        .chat-row {
          align-items: flex-end;
        }
        .chat-msg {
          margin-right: 10px;
          &::after {
            display: block;
            border-left: 6px solid #f2f6fc;
            right: -6px;
          }
        }
      }
    }
    .send-btn {
      width: 80px;
      height: 30px;
      position: absolute;
      right: 20px;
      bottom: 20px;
    }
  }
  .send-btn {
    width: 80px;
    height: 30px;
    background: #157dfa;
    color: #fff;
    position: absolute;
    right: 40px;
    bottom: 40px;
  }
}
</style>
